<template>
  <el-card class="app-container">
    <c-u-r-d-table :option="option" ref="table"/>
    <el-dialog
      :visible.sync="importDialogShowed"
      title="批量导入刷单记录"
      width="700px"
      :close-on-click-modal="false"
      center
      top="30vh"
    >
      <el-alert type="warning" :closable="false" show-icon style="line-height: 1.6">
        单次最多可导入刷单记录的数量最多5000条。若数量较多，可拆分文件后上传
      </el-alert>
      <div slot="footer" class="flex">
        <div class="flex-con" style="text-align: left;font-size: 14px">
          <a href="/template/import_click_farm.xlsx" target="_blank">
            下载导入模板
          </a>
        </div>
        <file-uploader
          title="上传导入文件"
          icon=""
          size="mini"
          type="primary"
          action="/api/cmt/click-farm/import"
          @success="handleImportSuccess"
        />
        <div class="flex-con"></div>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="removeCondShowed"
      title="批量清理"
      width="500px"
      :close-on-click-modal="false"
      center
      top="30vh"
    >
      <el-form ref="form" :model="removeCondForm" :rules="removeCondRule" label-width="80px">
        <el-form-item prop="clickFarmDate" label="刷单日期">
          <el-date-picker
            v-model="removeCondForm.clickFarmDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            size="mini"
            end-placeholder="结束日期"
            align="right"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            :picker-options="{
              ...dateRangePickerOptions,
              disabledDate: (time) => {
                return time.getTime() > Date.now()
              }
            }"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="removeCondShowed = false">取消</el-button>
        <el-button size="mini" type="primary" :loading="isRemovingCond" @click="handleRemoveCond">确定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>

import ColumnType from '@/framework/constant/ColumnType'
import { clickFarmApi } from '@/feature/cmt/infra/api/clickFarmApi'
import CURDTable from '@/framework/components/table/CURDTable'
import FileUploader from '@/framework/components/FileUploader'
import DateType from '@/framework/constant/DateType'
import { dateRangePickerOptions } from '@/framework/constant/DatePickerOptions'

export default {
  components: { FileUploader, CURDTable },
  data() {
    return {
      importDialogShowed: false,
      removeCondShowed: false,
      dateRangePickerOptions,
      isRemovingCond: false,
      removeCondForm: {
        clickFarmDate: []
      },
      removeCondRule: {
        clickFarmDate: [
          {
            required: true,
            message: '请选择刷单日期',
            trigger: 'blur'
          }
        ]
      },
      option: {
        requestApi: clickFarmApi,
        showSelection: true,
        dialogWidth: '600px',
        opFixed: false,
        columns: [
          {
            label: '商品ID',
            span: 24,
            width: 100,
            required: true,
            prop: 'productNo',
            searchable: true
          },
          {
            label: '刷单日期',
            prop: 'clickFarmDate',
            type: ColumnType.DATE,
            span: 24,
            width: 90,
            required: true,
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            searchable: true
          },
          {
            label: '旺旺号',
            span: 24,
            required: true,
            prop: 'wangWangNo',
            searchable: true
          },
          {
            label: '创建时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtCreate'
          },
          {
            label: '修改时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtModified'
          }
        ]
      }
    }
  },
  methods: {
    handleClearAll() {
      this.removeCondForm.clickFarmDate = []
      this.removeCondShowed = true
      // this.$refs.table.clearSelection()
    },
    handleImportSuccess() {
      this.importDialogShowed = false
      this.$refs.table.reloadTable()
    },
    handleImport() {
      this.importDialogShowed = true
    },
    handleRemoveCond() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.removeCondShowed = false
          this.isRemovingCond = true
          clickFarmApi.removeByCondition(this.removeCondForm).then(() => {
            this.isRemovingCond = false
            this.$refs.table.reloadTable()
          }).catch(() => {
            this.isRemovingCond = false
          })
        }
      })
    }
  }
}
</script>

